<script setup>
  import { ref, nextTick } from 'vue'
  const props =  defineProps({
    msg: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      required: false,
      default (){
        return [
            {title: '生产车间1',image:'/src/assets/车间-成品1.jpg', url: '/',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊!海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊!海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊!'},
            {title: '生产车间2',image:'/src/assets/车间-成品2.jpg', url: '/',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
            {title: '生产车间3',image:'/src/assets/车间-检验.jpg', url: '/',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
            {title: '生产车间4',image:'/src/assets/车间-生产.jpg', url: '/',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
            {title: '生产车间5',image:'/src/assets/车间-装配1.jpg', url: '/',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
            {title: '生产车间6',image:'/src/assets/车间-装配2.jpg', url: '/',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
        ]
      }
    }
  })

  const model = defineModel();
  
  model.value = 0;

  function changeModel(params) {
    model.value = params;
  }

  function bindleUpDown(params){
    let current = model.value + params;
    let leng = props.data.length;
    if(current<0)current = leng-1;
    if(current>=leng)current = 0;
    changeModel(current);
    bindleLoseHoverEvent();
  }
  
  function bindleHoverEvent(index){
    let proBar = document.querySelector('.ProgressBar');
    let lengths = (index+1)/props.data.length*100 + '%'; 
    proBar.setAttribute("style", "width: "+lengths);
  }
  function bindleLoseHoverEvent(){
    bindleHoverEvent(model.value)
  }
  const count = ref(0)


  import { Swiper } from 'swiper'; 
  import 'swiper/css';
  const current = defineModel('current');
  current.value = 1
  let onSlidePrev = ()=>{};
  let onSlideNext = ()=>{};
  let changeSlide = ()=>{};
  let bindleChangCurrent = (index)=>{
    current.value = index + 1;
    console.log('current:',current.value);
    bindleHoverEvent(index)
  }
  nextTick(() => {
    // const swiper = honorSwiper.$swiper;
    // honorSwiper.navigation.init();
    // console.log('cutNum',cutNum);
    let slideThumbsCut = isMobile()?3:6; 
    let wsthumbs = new Swiper('#workshopThumbsSwiper',{
        slidesPerView: slideThumbsCut,
        direction:'horizontal',// 'vertical', // 垂直切换选项
    })
    var mySwiper = new Swiper('#workshopSwiper', {
      direction:'horizontal',// 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next-workshop',
        prevEl: '.swiper-button-prev-workshop',
      },
      thumbs: {
        swiper: wsthumbs
      }
    })
    onSlidePrev = ()=>{
      mySwiper.slidePrev();
      bindleChangCurrent(mySwiper.realIndex);
    }
    onSlideNext = ()=>{
      mySwiper.slideNext();
      bindleChangCurrent(mySwiper.realIndex);
    }

    changeSlide = (index)=>{
      mySwiper.slideTo(index);
      bindleChangCurrent(mySwiper.realIndex);
    }

    function isMobile() {
      const mobileWidthThreshold = 768; // 设定移动端宽度阈值为768px
      // console.log('window.innerWidth:',window.innerWidth);
      return window.innerWidth <= mobileWidthThreshold;
    }
  });


  </script>
  
  <template>
    <div class="w-full h-full pt-[152px] mobile:pt-[80px] mobile:px-4 self-center bg-no-repeat wen-mobile-down">
        <div class="flex mb-[80px] mobile:mb-8">
            <span class="wen-index-title">制造能力</span>
        </div>
        <div class="w-full self-center mx-auto mt-[80px] mobile:mt-0 mobile:mb-8 wow animate__animated animate__pushOnRight timing">
            <div class="ProgressBar h-[4px] bg-dominant timing"></div>
            <div class="swiper workshopThumbsSwiper" id="workshopThumbsSwiper">
              <div class="swiper-wrapper w-full justify-items-center mobile:w-max">
                  <div v-for="(item, index) in data" class="swiper-slide text-underint cursor-pointer border-t-0 hover:text-dominant hover:border-dominant mobile:px-1" @click="changeSlide(index)" @mouseenter="bindleHoverEvent(index)" @mouseleave="bindleLoseHoverEvent" :class="{active:index==model}">
                      <h3 class="line-clamp-2 h-24 text-2xl mt-6 !leading-snug mobile:text-base mobile:pr-6 mobile:h-auto">{{ item.title }}</h3>
                  </div>
                </div>
            </div>
        </div>
        <div class="w-full swiper workshopSwiper  wow animate__animated animate__pushOnRight timing" id="workshopSwiper">
            <div class="w-full swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in data" :key="index">
                    <div class="flex bg-dominant mobile:bg-dominant/60 relative mobile:block mobile:pt-[184px]">
                        <div class="w-full flex-auto p-[40px] mobile:py-6 mobile:p-4 mobile:z-10 relative mobile:bg-dominant" >
                            <h3 class="text-3xl text-white my-8 mobile:my-0 mobile:mb-2 font-bold mobile:text-xl"><a :href="item.url">{{ item.title }}</a></h3>
                            <p class="text-lg text-white/60 line-clamp-6 mobile:line-clamp-7 h-48 mobile:h-40 mb-12 mobile:mb-0 leading-8 mobile:text-sm moble:leading-[20px]"><a :href="item.url">{{item.infor }}</a></p>
                        </div>
                        <div class="w-full flex-auto mobile:absolute mobile:left-0 mobile:top-0 mobile:h-[184px] " >
                            <img class="mobile:absolute mobile:left-1/2 mobile:top-1/2 mobile:-translate-x-1/2 mobile:-translate-y-1/2 mobile:min-w-[100%] mobile:min-h-[100%] mobile:z-0" :src="item.image" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="absolute right-0 top-0 z-10 mobile:bottom-0 mobile:top-auto mobile:hidden">
                <a href="javascript:void(0)" @click="onSlidePrev()" class=".swiper-button-prev-workshop fa fa-angle-left fa-3x py-3 px-6 inline-block bg-undergray text-dominant hover:text-white hover:bg-dominant"></a>
                <a href="javascript:void(0)" @click="onSlideNext()" class=".swiper-button-next-workshop fa fa-angle-right fa-3x py-3 px-6 inline-block bg-undergray text-dominant hover:text-white hover:bg-dominant"></a>
            </div>
        </div>
    </div>
  </template>
  <style scoped>
  ul.grid li.active{
    border-color: #2F3767;
    color: #2F3767
  }
  .ProgressBar{
    transition: all 0.5s;
  }
  </style>
  